{% load i18n %}
{% load static %}
<html>
<head>
    <link href="{% static 'bootstrap/css/bootstrap.css' %}" rel="stylesheet">
    <link href="{% static 'bootstrap/css/bootstrap-theme.css' %}" rel="stylesheet">
    <link href="{% static 'css/styles.css' %}" rel="stylesheet">
    <script src="{% static 'js/jquery-2.1.1.min.js' %}"></script>
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
    <title>{% trans "Main page" %}</title>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                        aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img src="{% if user.userprofile.picture %}{{ user.userprofile.picture.url }}{% else %}/media/profile_images/no_avatar.jpg{% endif %}"
							alt="User Icon" height="20" width="20" class="pull-left">
                    <div class="user-name">
                        <small>{% trans "Hello" %},</small>
                        {{ user }}</div>
                </a>
                <div id="navbar" class="navbar-collapse collapse pull-left">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">{% trans "Home" %}</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-expanded="false">{% trans "Projects" %} <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li role="presentation"><a role="menuitem" tabindex="-1"
                                                           href="/new_project/">{% trans "Create Project" %}</a>
                                </li>
                                {% for project in projects %}
                                    <li role="presentation"><a
                                            href="/project/{{ project.project.id }}">{{ project.project.title }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </li>
						<li><a href="/logout/">{% trans "Log out" %}</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    {% if messages %}
        {% for message in messages %}
            <p {% if message.tags %} class="alert alert-{{ message.tags }}"{% endif %}>{{ message }}</p>
        {% endfor %}
    {% endif %}
    <div class="row">
        <h2>{% trans "User's projects" %}</h2>
        <ul class="list-group">
            {% for project in projects %}
                <li class="list-group-item"><a
                        href="/project/{{ project.project.id }}">{{ project.project.title }}</a> - {{ project.role }}
                </li>
            {% endfor %}
        </ul>
    </div>
</div>

</body>
</html>